<template>
  <div class="shadow-light">
    <a-loading :visible="true" v-if="loading"></a-loading>
    <div id="text-editor-toolbar" class="row bg-white justify-center relative-position" style="z-index: 100">
      <div class="row col justify-center" :class="{'toolbar-fixed': toolbarFixed}" :style="toolbarHeight">
        <div class="col">
          <button class="ql-bold"></button>
          <button class="ql-blockquote"></button>
          <button class="ql-header" value="2"></button>
          <button class="ql-list" value="ordered"></button>
          <button class="ql-list" value="bullet"></button>
          <button class="ql-clean"></button>
          <button class="ql-link"></button>
          <button class="ql-image"></button>
        </div>
        <!--<button @click="isFullScreen=!isFullScreen" style="padding: 0 5px!important;">-->
        <!--<q-icon :name="isFullScreen?'fullscreen_exit':'fullscreen'" class="size-24"/>-->
        <!--</button>-->
      </div>
    </div>
    <quill-editor ref="textEditor"
                  class="note bg-white"
                  :value="value"
                  @input="onInput"
                  :options="textEditorOptions"
    >
    </quill-editor>
    <a-upload ref="upload" @uploaded="insertImage" @startLoading="startLoading" @stopLoading="stopLoading"></a-upload>
  </div>
</template>

<script>
  import { quillEditor } from 'vue-quill-editor'
  import Quill from 'quill'
  import '../../node_modules/quill/dist/quill.snow.css'
  import { mapState } from 'vuex'

  const Clipboard = Quill.import('modules/clipboard')

  class MyClipboard extends Clipboard {
    onPaste (e) {
      const wrapper = document.querySelector('#editor-wrapper')

      if (!wrapper) {
        return
      }

      const scrollTop = wrapper.scrollTop
      super.onPaste(e)
      setTimeout(function () {
        wrapper.scrollTop = scrollTop
      }, 10)
    }
  }

  Quill.register('modules/clipboard', MyClipboard, true)

    export default {
      name: 'aEditor',
      components: { quillEditor },
      props: {
        value: {
          type: String,
          required: false,
          default: ''
        }
      },
      data () {
        return {
          loading: false,
          toolbarFixed: false,
          toolbarHeight: {},
          textEditorOptions: {
            placeholder: '讨论内容',
            modules: {
              toolbar: {
                container: '#text-editor-toolbar',
                handlers: {
                  'image': this.openFileDialog
                }
              },
              clipboard: {}
            }
          }
        }
      },
      computed: {
        ...mapState(['scrollStatus', 'unreadNotifyCount'])
      },
      watch: {
        scrollStatus (scrollStatus) {
          this.handleScroll(scrollStatus)
        }
      },
      methods: {
        onInput (content) {
          this.$emit('input', content)
        },
        openFileDialog () {
          this.$refs.upload.openFileDialog()
        },
        startLoading () {
          this.loading = true
        },
        stopLoading () {
          this.loading = false
        },
        insertImage (imageUrl) {
          const quill = this.$refs.textEditor.quill,
            selection = quill.getSelection(),
            length = selection ? selection.index : 0

          quill.insertEmbed(length, 'image', imageUrl)
          quill.setSelection(length + 1, 0)
        },
        handleScroll (scrollStatus) {
          const toolbarEl = document.getElementById('text-editor-toolbar')
          const offset = toolbarEl.offsetTop - scrollStatus.position
          if (offset <= 50) {
            this.toolbarFixed = true
            this.toolbarHeight = { top: scrollStatus.position - toolbarEl.offsetTop + 48 + (scrollStatus.direction === 'up' ? -48 : 0) + 'px' }
          } else {
            this.toolbarFixed = false
            this.toolbarHeight = {}
          }
        }
      }
    }
</script>

<style lang="stylus">
  .toolbar-fixed
    position absolute
    top 50px
    background-color white
    border-bottom 1px solid #eee
    padding 8px

  .ql-editor
    line-height 1.5em
    min-height 160px
    font-size 18px
    p
      margin-bottom 20px

  .ql-container
    border none!important

  .ql-toolbar
    border-top none!important
    border-left none!important
    border-right  none!important
    border-bottom 1px solid #eee!important

  .ql-editor.ql-blank:before
    font-style inherit!important
</style>
